<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MES生产执行系统 - 大屏看板</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        body {
            background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            margin: 0;
            padding: 0;
            overflow-x: hidden;
        }
        
        .dashboard-header {
            background: rgba(255,255,255,0.1);
            backdrop-filter: blur(10px);
            color: white;
            padding: 20px 0;
            text-align: center;
            border-bottom: 1px solid rgba(255,255,255,0.2);
        }
        
        .dashboard-title {
            font-size: 2.5rem;
            font-weight: bold;
            margin: 0;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }
        
        .dashboard-subtitle {
            font-size: 1.2rem;
            margin: 10px 0 0 0;
            opacity: 0.9;
        }
        
        .dashboard-time {
            font-size: 1.5rem;
            margin: 10px 0 0 0;
            font-weight: 300;
        }
        
        .dashboard-container {
            padding: 20px;
            min-height: calc(100vh - 120px);
        }
        
        .kpi-card {
            background: rgba(255,255,255,0.95);
            border-radius: 15px;
            padding: 25px;
            margin-bottom: 20px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            border: none;
            transition: all 0.3s ease;
        }
        
        .kpi-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 40px rgba(0,0,0,0.15);
        }
        
        .kpi-icon {
            font-size: 3rem;
            margin-bottom: 15px;
        }
        
        .kpi-value {
            font-size: 2.5rem;
            font-weight: bold;
            margin-bottom: 5px;
        }
        
        .kpi-label {
            font-size: 1.1rem;
            color: #666;
            margin-bottom: 10px;
        }
        
        .kpi-trend {
            font-size: 0.9rem;
        }
        
        .kpi-trend.up {
            color: #28a745;
        }
        
        .kpi-trend.down {
            color: #dc3545;
        }
        
        .chart-card {
            background: rgba(255,255,255,0.95);
            border-radius: 15px;
            padding: 25px;
            margin-bottom: 20px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            border: none;
        }
        
        .chart-title {
            font-size: 1.3rem;
            font-weight: bold;
            margin-bottom: 20px;
            color: #333;
        }
        
        .chart-container {
            height: 300px;
            width: 100%;
        }
        
        .list-card {
            background: rgba(255,255,255,0.95);
            border-radius: 15px;
            padding: 25px;
            margin-bottom: 20px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            border: none;
        }
        
        .list-title {
            font-size: 1.3rem;
            font-weight: bold;
            margin-bottom: 20px;
            color: #333;
        }
        
        .list-item {
            padding: 15px;
            border-bottom: 1px solid #eee;
            transition: all 0.3s ease;
        }
        
        .list-item:hover {
            background: #f8f9fa;
        }
        
        .list-item:last-child {
            border-bottom: none;
        }
        
        .status-badge {
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: bold;
        }
        
        .status-success {
            background: #d4edda;
            color: #155724;
        }
        
        .status-warning {
            background: #fff3cd;
            color: #856404;
        }
        
        .status-danger {
            background: #f8d7da;
            color: #721c24;
        }
        
        .status-info {
            background: #d1ecf1;
            color: #0c5460;
        }
        
        .progress-bar {
            height: 8px;
            border-radius: 4px;
            background: #e9ecef;
            overflow: hidden;
            margin-top: 10px;
        }
        
        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #007bff, #0056b3);
            transition: width 0.3s ease;
        }
        
        @media (max-width: 768px) {
            .dashboard-title {
                font-size: 2rem;
            }
            
            .dashboard-subtitle {
                font-size: 1rem;
            }
            
            .dashboard-time {
                font-size: 1.2rem;
            }
            
            .kpi-value {
                font-size: 2rem;
            }
            
            .chart-container {
                height: 250px;
            }
        }
    </style>
</head>
<body>
    <!-- 头部 -->
    <div class="dashboard-header">
        <h1 class="dashboard-title">
            <i class="fas fa-industry"></i> MES生产执行系统
        </h1>
        <p class="dashboard-subtitle">实时生产监控大屏</p>
        <div class="dashboard-time" id="current-time"></div>
    </div>
    
    <!-- 主要内容 -->
    <div class="dashboard-container">
        <div class="row">
            <!-- KPI指标 -->
            <div class="col-lg-3 col-md-6">
                <div class="kpi-card text-center">
                    <div class="kpi-icon text-primary">
                        <i class="fas fa-calendar-check"></i>
                    </div>
                    <div class="kpi-value text-primary" id="plan-count">0</div>
                    <div class="kpi-label">执行中计划</div>
                    <div class="kpi-trend up">
                        <i class="fas fa-arrow-up"></i> 较昨日 +5%
                    </div>
                </div>
            </div>
            
            <div class="col-lg-3 col-md-6">
                <div class="kpi-card text-center">
                    <div class="kpi-icon text-success">
                        <i class="fas fa-cogs"></i>
                    </div>
                    <div class="kpi-value text-success" id="equipment-count">0</div>
                    <div class="kpi-label">运行设备</div>
                    <div class="kpi-trend up">
                        <i class="fas fa-arrow-up"></i> 较昨日 +2%
                    </div>
                </div>
            </div>
            
            <div class="col-lg-3 col-md-6">
                <div class="kpi-card text-center">
                    <div class="kpi-icon text-warning">
                        <i class="fas fa-exclamation-triangle"></i>
                    </div>
                    <div class="kpi-value text-warning" id="warning-count">0</div>
                    <div class="kpi-label">库存预警</div>
                    <div class="kpi-trend down">
                        <i class="fas fa-arrow-down"></i> 较昨日 -3%
                    </div>
                </div>
            </div>
            
            <div class="col-lg-3 col-md-6">
                <div class="kpi-card text-center">
                    <div class="kpi-icon text-info">
                        <i class="fas fa-chart-line"></i>
                    </div>
                    <div class="kpi-value text-info" id="efficiency">0%</div>
                    <div class="kpi-label">生产效率</div>
                    <div class="kpi-trend up">
                        <i class="fas fa-arrow-up"></i> 较昨日 +1.5%
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row">
            <!-- 图表区域 -->
            <div class="col-lg-8">
                <div class="chart-card">
                    <div class="chart-title">
                        <i class="fas fa-chart-area"></i> 生产进度趋势
                    </div>
                    <div class="chart-container" id="production-trend-chart"></div>
                </div>
            </div>
            
            <!-- 实时列表 -->
            <div class="col-lg-4">
                <div class="list-card">
                    <div class="list-title">
                        <i class="fas fa-list"></i> 订单进度
                    </div>
                    <div id="order-progress-list">
                        <!-- 动态加载订单进度 -->
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row">
            <!-- 设备状态 -->
            <div class="col-lg-6">
                <div class="chart-card">
                    <div class="chart-title">
                        <i class="fas fa-cogs"></i> 设备状态分布
                    </div>
                    <div class="chart-container" id="equipment-status-chart"></div>
                </div>
            </div>
            
            <!-- 库存预警 -->
            <div class="col-lg-6">
                <div class="list-card">
                    <div class="list-title">
                        <i class="fas fa-exclamation-triangle"></i> 库存预警
                    </div>
                    <div id="stock-warning-list">
                        <!-- 动态加载库存预警 -->
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row">
            <!-- 最新报工 -->
            <div class="col-lg-12">
                <div class="list-card">
                    <div class="list-title">
                        <i class="fas fa-history"></i> 最新报工记录
                    </div>
                    <div id="work-records-list">
                        <!-- 动态加载报工记录 -->
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <script>
        // 全局变量
        let productionTrendChart, equipmentStatusChart;
        
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            initCharts();
            updateTime();
            loadDashboardData();
            
            // 定时更新
            setInterval(updateTime, 1000);
            setInterval(loadDashboardData, 30000); // 30秒刷新一次
        });
        
        // 更新时间
        function updateTime() {
            const now = new Date();
            const timeString = now.toLocaleString('zh-CN', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit'
            });
            document.getElementById('current-time').textContent = timeString;
        }
        
        // 初始化图表
        function initCharts() {
            // 生产进度趋势图
            productionTrendChart = echarts.init(document.getElementById('production-trend-chart'));
            
            // 设备状态分布图
            equipmentStatusChart = echarts.init(document.getElementById('equipment-status-chart'));
            
            // 响应式处理
            window.addEventListener('resize', function() {
                productionTrendChart.resize();
                equipmentStatusChart.resize();
            });
        }
        
        // 加载仪表板数据
        function loadDashboardData() {
            loadKPI();
            loadProductionTrend();
            loadEquipmentStatus();
            loadOrderProgress();
            loadStockWarning();
            loadWorkRecords();
        }
        
        // 加载KPI数据
        function loadKPI() {
            // 这里应该从后端获取实时数据
            // 暂时使用模拟数据
            document.getElementById('plan-count').textContent = Math.floor(Math.random() * 20) + 10;
            document.getElementById('equipment-count').textContent = Math.floor(Math.random() * 15) + 25;
            document.getElementById('warning-count').textContent = Math.floor(Math.random() * 10) + 5;
            document.getElementById('efficiency').textContent = (Math.random() * 20 + 80).toFixed(1) + '%';
        }
        
        // 加载生产进度趋势
        function loadProductionTrend() {
            const option = {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['计划完成率', '实际完成率', '生产效率']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00']
                },
                yAxis: {
                    type: 'value',
                    min: 0,
                    max: 100,
                    axisLabel: {
                        formatter: '{value}%'
                    }
                },
                series: [
                    {
                        name: '计划完成率',
                        type: 'line',
                        data: [0, 15, 35, 60, 80, 95, 100],
                        smooth: true,
                        lineStyle: {
                            color: '#007bff',
                            width: 3
                        },
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: 'rgba(0,123,255,0.3)'
                                }, {
                                    offset: 1, color: 'rgba(0,123,255,0.1)'
                                }]
                            }
                        }
                    },
                    {
                        name: '实际完成率',
                        type: 'line',
                        data: [0, 12, 32, 58, 78, 92, 98],
                        smooth: true,
                        lineStyle: {
                            color: '#28a745',
                            width: 3
                        }
                    },
                    {
                        name: '生产效率',
                        type: 'line',
                        data: [85, 88, 92, 95, 93, 90, 87],
                        smooth: true,
                        lineStyle: {
                            color: '#ffc107',
                            width: 3
                        }
                    }
                ]
            };
            
            productionTrendChart.setOption(option);
        }
        
        // 加载设备状态分布
        function loadEquipmentStatus() {
            const option = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: ['正常运行', '维护中', '故障', '闲置']
                },
                series: [
                    {
                        name: '设备状态',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            {value: 25, name: '正常运行', itemStyle: {color: '#28a745'}},
                            {value: 8, name: '维护中', itemStyle: {color: '#ffc107'}},
                            {value: 3, name: '故障', itemStyle: {color: '#dc3545'}},
                            {value: 4, name: '闲置', itemStyle: {color: '#6c757d'}}
                        ]
                    }
                ]
            };
            
            equipmentStatusChart.setOption(option);
        }
        
        // 加载订单进度
        function loadOrderProgress() {
            const container = document.getElementById('order-progress-list');
            container.innerHTML = '';
            
            // 模拟数据
            const orders = [
                {order_no: 'ORD202501001', customer: '客户A', progress: 85},
                {order_no: 'ORD202501002', customer: '客户B', progress: 60},
                {order_no: 'ORD202501003', customer: '客户C', progress: 95},
                {order_no: 'ORD202501004', customer: '客户D', progress: 30}
            ];
            
            orders.forEach(order => {
                const item = document.createElement('div');
                item.className = 'list-item';
                item.innerHTML = `
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <div class="fw-bold">${order.order_no}</div>
                            <div class="text-muted">${order.customer}</div>
                        </div>
                        <div class="text-end">
                            <div class="fw-bold">${order.progress}%</div>
                            <div class="progress-bar">
                                <div class="progress-fill" style="width: ${order.progress}%"></div>
                            </div>
                        </div>
                    </div>
                `;
                container.appendChild(item);
            });
        }
        
        // 加载库存预警
        function loadStockWarning() {
            const container = document.getElementById('stock-warning-list');
            container.innerHTML = '';
            
            // 模拟数据
            const warnings = [
                {material: '原材料A', warehouse: '主仓库', quantity: 50, min_stock: 100},
                {material: '原材料B', warehouse: '辅仓库', quantity: 20, min_stock: 50},
                {material: '原材料C', warehouse: '主仓库', quantity: 0, min_stock: 30}
            ];
            
            warnings.forEach(warning => {
                const item = document.createElement('div');
                item.className = 'list-item';
                const status = warning.quantity === 0 ? 'danger' : 'warning';
                const statusText = warning.quantity === 0 ? '无库存' : '库存不足';
                
                item.innerHTML = `
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <div class="fw-bold">${warning.material}</div>
                            <div class="text-muted">${warning.warehouse}</div>
                        </div>
                        <div class="text-end">
                            <div class="status-badge status-${status}">${statusText}</div>
                            <div class="text-muted">${warning.quantity}/${warning.min_stock}</div>
                        </div>
                    </div>
                `;
                container.appendChild(item);
            });
        }
        
        // 加载报工记录
        function loadWorkRecords() {
            const container = document.getElementById('work-records-list');
            container.innerHTML = '';
            
            // 模拟数据
            const records = [
                {order_no: 'ORD202501001', process: '切割', quantity: 100, operator: '张三', time: '14:30'},
                {order_no: 'ORD202501002', process: '焊接', quantity: 50, operator: '李四', time: '14:25'},
                {order_no: 'ORD202501003', process: '组装', quantity: 80, operator: '王五', time: '14:20'},
                {order_no: 'ORD202501001', process: '打磨', quantity: 100, operator: '赵六', time: '14:15'}
            ];
            
            records.forEach(record => {
                const item = document.createElement('div');
                item.className = 'list-item';
                item.innerHTML = `
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <div class="fw-bold">${record.order_no} - ${record.process}</div>
                            <div class="text-muted">操作员: ${record.operator}</div>
                        </div>
                        <div class="text-end">
                            <div class="fw-bold text-success">+${record.quantity}</div>
                            <div class="text-muted">${record.time}</div>
                        </div>
                    </div>
                `;
                container.appendChild(item);
            });
        }
    </script>
</body>
</html>
